<template>
  <div class="component-tabbar">
    <div class="tab" @click="changeTab('uncompleteList')">
      <p :class="{'active': currentTab === 'uncompleteList'}">待处理</p>
    </div>
    <div class="tab" @click="changeTab('storageList')">
      <p :class="{'active': currentTab === 'storageList'}">计件入库</p>
    </div>
    <div class="tab" @click="changeTab('productionPlanningManagementList')">
      <p :class="{'active': currentTab === 'productionPlanningManagementList'}">生产计划</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  props: ['currentTab'],
  methods: {
    changeTab(tab) {
      this.$router.push({ name: 'mpiecework-' + tab})
    }
  } 
}
</script>

<style lang="scss" scoped>
  .component-tabbar{
    position:fixed;
    bottom:0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #FFF;
    box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
    z-index: 99;
    display: flex;
    .tab{
      flex: 1;
      line-height: 46px;
      p{
        margin: 0;
        color: #969696;
        &.active{
          color: #409EFF;
        }
      }
    }
  }
</style>